<template>
  <!-- recommend vue prop sort
  is v-for v-if v-else-if v-else v-show v-cloak v-pre v-once id ref key slot v-model all-normal-props v-bind v-on v-html v-text-->
  <div>
    <div class="form-wrap">
      <div v-for="item in list" :key="item.key" class="input-field">
        <span class="label">{{item.label}}</span>
        <input
          v-model="form[item.key]"
          class="input-block"
          type="text"
          password
          :placeholder="item.placeholder"
          placeholder-class="placeholder-part"
        >
      </div>
      <button class="btn-color-blue" @click="handleChangePassword">确定</button>
    </div>
  </div>
</template>

<script>
import { encryptMD5 } from '@/utils'
import { UPDATA_NAME_AND_PASS } from '@/api'

export default {
  components: {},
  props: {},
  data () {
    return {
      form: {},
      list: [
        { label: '原密码', key: 'oldPassword', placeholder: '请输入原密码' },
        { label: '新密码', key: 'newPassword', placeholder: '请输入新密码' },
        {
          label: '确认密码',
          key: 'reNewPassword',
          placeholder: '请再次输入新密码'
        }
      ]
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  onShow () {},
  methods: {
    handleChangePassword () {
      if (!this.form.oldPassword) {
        this.$toast('请输入原密码')
      } else if (!this.form.newPassword) {
        this.$toast('请输入新密码')
      } else if (!this.form.reNewPassword) {
        this.$toast('请再次输入新密码')
      } else if (this.form.newPassword !== this.form.reNewPassword) {
        this.$toast('两次输入的新密码不一致')
      } else if (this.form.newPassword === this.form.oldPassword) {
        this.$toast('新老密码不能相同')
      } else if (
        this.form.newPassword.length < 6 ||
        this.form.newPassword.length > 20
      ) {
        this.$toast('密码设置应为6~20位')
      } else {
        this.changePassword()
      }
    },
    changePassword () {
      const vm = this

      let params = {
        newPwd: encryptMD5(vm.form.newPassword),
        oldPwd: encryptMD5(vm.form.oldPassword),
        rePwd: encryptMD5(vm.form.reNewPassword),
        adminId: vm.$cookie.get('new-admin-info').adminId
        // shopId: vm.$store.state.account.shopId
      }

      UPDATA_NAME_AND_PASS(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.$toast('操作成功')
            vm.form = {}
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';

.form-wrap {
  > .btn-color-blue {
    margin-top: 50px;
  }
}
</style>
